<script lang="ts" setup>
import { computed } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';

defineOptions({ name: 'ExceptionBase' });

type ExceptionType = '403' | '404' | '500';

interface Props {
  /**
   * Exception type
   *
   * - 403: no permission
   * - 404: not found
   * - 500: service error
   */
  type: ExceptionType;
}

const props = defineProps<Props>();

const { routerPushByKey } = useRouterPush();

const iconMap: Record<ExceptionType, string> = {
  '403': 'no_auth',
  '404': 'not_found',
  '500': 'system_error'
};

const icon = computed(() => iconMap[props.type]);
</script>

<template>
  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
    <div class="flex text-400px text-primary">
      <SvgIcon :local-icon="icon" />
    </div>
    <!-- <div v-if="props?.type === '404'" class="text-18px">未找到访问页。</div> -->
    <!-- <div v-if="props?.type === '403'" class="text-18px">暂无权限，请联系管理员开通！</div> -->
    <!-- <div v-if="props?.type === '500'" class="text-18px">系统错误，请联系管理员！</div> -->
    <NButton quaternary type="primary" @click="routerPushByKey('root')">{{ $t('common.backToHome') }}</NButton>
  </div>
</template>

<style scoped></style>
